<template>
    <div>
      <film-swiper :key="datalist.length">
        <film-swiper-item v-for="data in datalist" :key="data.id">
          <img :src="data.imgUrl" alt="">
        </film-swiper-item>
      </film-swiper>
      <film-header class="sticky"></film-header>
      <router-view></router-view>
    </div>
</template>
<script>
import filmSwiperItem from '@/components/films/FilmSwiperItem'
import filmSwiper from '@/components/films/FilmSwiper'
import filmHeader from '@/components/films/FilmHeader'
import axios from 'axios'
export default {
  components: {
    filmHeader,
    filmSwiper,
    filmSwiperItem
  },
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    axios.get('/banner.json').then(res => {
      // console.log(res.data)
      this.datalist = res.data.banner
    })
  }
}
</script>
<style lang="scss" scoped>
  .sticky{
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 100;
  }
</style>
